<template>
  <div class="hm-login">
    <!-- <div class="title"></div> -->
    <van-nav-bar title="面经登录" />
    <div class="input">
      <!-- <div class="user"> -->
      <!-- <div class="label"><span>用户名</span></div>
        <div class="user_input"><input type="text" placeholder="用户名" /></div> -->

      <!-- </div> -->
      <van-cell-group>
        <van-field v-model="user" label="用户名" placeholder="用户名" />
      </van-cell-group>
      <!-- <div class="password">
        <div class="label"><span>密码</span></div>

        <div class="password_input">
          <input type="password" placeholder="密码" />
        </div>
      </div> -->
      <van-cell-group>
        <van-field
          v-model="password"
          label="密码"
          type="password"
          placeholder="密码"
        />
      </van-cell-group>
    </div>
    <!-- <button class="submit">提交</button> -->
    <van-button color="#e97637" size="large" @click="get">提交</van-button>
    <div class="footer">
      <router-link to="/register">注册账号</router-link>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      user: "yanzhan",
      password: "000000",
    };
  },
  methods: {
    async get() {
      if (this.user.trim() === "" || !this.password.trim() === "") {
        alert("请输入用户名或密码");
        return;
      }
      try {
        const src = await axios({
          url: "http://interview-api-t.itheima.net/h5/user/login",
          method: "post",
          data: {
            username: this.user,
            password: this.password,
          },
        });
        if (src.status === 200) {
          console.log(src);
          localStorage.setItem("token", src.data.data.token);
          this.$router.push("/article");
        }
      } catch {
        alert("用户名或密码错误");
      }
    },
  },
};
</script>

<style lang="less" scoped>
.title {
  width: 100%;
  height: 50px;
  font-size: 20px;
  text-align: center;
  border-bottom: 1px solid #ccc;
  line-height: 40px;
}
.input {
  padding: 0 10px;
}
.user {
  width: 100%;
  height: 50px;
  line-height: 50px;
  border-bottom: 1px solid #ccc;
  display: flex;
}
.password {
  width: 100%;
  height: 50px;
  line-height: 50px;
  border-bottom: 1px solid #ccc;
  display: flex;
}
.label {
  width: 100px;
  height: 50px;
}
input {
  width: 100%;
  border: none;
  outline: none;
}
.submit {
  width: 100%;
  height: 50px;
  background-color: #e97637;
  color: white;
  border: 0;
  margin-top: 10px;
}
.footer {
  width: 100%;
  height: 50px;
  line-height: 50px;
  text-align: end;
}
</style>
